<template>
  <div>
    <!-- 新增售后 -->
    <el-form
      :model="addForm"
      ref="addFormRef"
      :rules="rules"
      label-position="top"
    >
      <el-form-item label="设备名称" prop="deviceName">
        <el-input
          v-model="addForm.deviceName"
          readonly
          placeholder="请点击选择设备"
          @click="openDrawer"
        />
      </el-form-item>
      <el-form-item label="联系人名称" prop="contact">
        <el-input v-model="addForm.contact" placeholder="请输入联系人名称" />
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="addForm.phone" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item label="问题说明" prop="content">
        <el-input
          v-model="addForm.content"
          type="textarea"
          :rows="5"
          placeholder="请输入问题说明"
        />
      </el-form-item>
      <el-form-item label="问题图片">
        <div class="w-full flex flex-wrap items-center">
          <template v-for="item in addForm.images" :key="item">
            <el-image
              :src="item"
              v-if="item"
              class="w-[5rem] h-[5rem] mr-2"
              :preview-src-list="[item]"
            ></el-image>
          </template>
          <el-upload
            class="avatar-uploader"
            action="https://storebms.supore.cn/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>

    <div class="fixed bottom-2 right-2">
      <el-button @click="handleCancel(0)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        {{ loading ? "提交中..." : "提交" }}
      </el-button>
    </div>

    <el-drawer
      v-model="device_drawer"
      destroy-on-close
      size="60%"
      title="选择设备"
    >
      <ChangeDevice @handleBack="handleDeviceBack" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import UploadImage from "@/components/UploadImage.vue";
import ChangeDevice from "@/components/ChangeDevice.vue";
import { handleApiResponse } from "@/utils/request.js";
import { ApplyAfterSale } from "../../../../../wailsjs/go/api/OrderApi.js";

onMounted(() => {});

const emit = defineEmits(["handleBack"]);

const addFormRef = ref(null);
const addForm = ref({
  deviceName: "",
  outCode: "",
  contact: "",
  phone: "",
  images: [],
});

const handleCancel = (val = 0) => {
  emit("handleBack", val);
};

const loading = ref(false);
const handleSubmit = () => {
  addFormRef.value.validate((valid) => {
    if (!valid) return;
    loading.value = true;
    handleApiResponse(() => ApplyAfterSale(addForm.value)).then((res) => {
      if (res.code == 0) {
        ElMessage.success("提交成功");
        handleCancel(1);
      }
      loading.value = false;
    });
  });
};

// 上传图片
// 上传成功的回调函数
const handleAvatarSuccess = (response, file, fileList) => {
  ElMessage.success("上传成功");
  addForm.value.images.push(response.data.path);
};

// 上传之前的回调函数，用于验证文件类型
const beforeAvatarUpload = (file) => {
  // const isJPG = file.type === "image/jpeg";
  // if (!isJPG) {
  //   ElMessage.error("上传的图片只能是JPG格式");
  // }
  // return isJPG;
};

// 选择设备
const device_drawer = ref(false);
const openDrawer = () => {
  device_drawer.value = true;
};
const handleDeviceBack = (val) => {
  addForm.value.deviceName = val.deviceName;
  addForm.value.outCode = val.outCode;
  device_drawer.value = false;
};

const rules = ref({
  deviceName: [{ required: true, message: "请输入设备名称" }],
  outCode: [{ required: true, message: "请输入设备编号" }],
  contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入手机号码" },

    {
      validator: (rule, value, callback) => {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error("请输入正确的手机号码"));
        } else {
          callback();
        }
      },
    },
  ],
  content: [
    {
      required: true,
      message: "请输入具体问题说明",
    },
  ],
});
</script>

<style scoped lang="scss">
</style>